import React,{memo,useState,useEffect} from 'react'
import "../../assets/Layout/ck.scss"
import { SearchOutlined} from '@ant-design/icons';
import { Avatar, Input, Pagination, Space, Tabs } from 'antd'
import type { TabsProps } from 'antd';
const { Search } = Input;
function CkIndex(){
  const onChange = (key: string) => {
    console.log(key);
  };

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部'
    },
    {
      key: '2',
      label: '图片/链接',
    },
    {
      key: '3',
      label: '文件',
    },
  ];

  return <>
    <div className="ck-header">
      <Input
        prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
        placeholder="搜索记录"/>
    </div>
    <div className="ck-h-top">
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
    <div className="ck-main">
        <div className="ck-itet">
          <div className="ck-img"></div>
          <div className="ck-con">
            <div className="ck-con-name">
              <span>用户姓名</span>
              <span>2024/01/02 12:20:00</span>
            </div>
            <div className="ck-con-box">1232312312331aksjfhaskjfhkjashfj1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfkksaakjahfk</div>
          </div>

        </div>
      <div className="ck-itet">
        <div className="ck-img"></div>
        <div className="ck-con">
          <div className="ck-con-name">
            <span>用户姓名</span>
            <span>2024/01/02 12:20:00</span>
          </div>
          <div className="ck-con-box">1232312312331aksjfhaskjfhkjashfj1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfkksaakjahfk</div>
        </div>

      </div>
      <div className="ck-itet">
        <div className="ck-img"></div>
        <div className="ck-con">
          <div className="ck-con-name">
            <span>用户姓名</span>
            <span>2024/01/02 12:20:00</span>
          </div>
          <div className="ck-con-box">1232312312331aksjfhaskjfhkjashfj1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfkksaakjahfk</div>
        </div>

      </div>
      <div className="ck-itet">
        <div className="ck-img"></div>
        <div className="ck-con">
          <div className="ck-con-name">
            <span>用户姓名</span>
            <span>2024/01/02 12:20:00</span>
          </div>
          <div className="ck-con-box">1232312312331aksjfhaskjfhkjashfj1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfk1232312312331aksjfhaskjfhkjashfjksaakjahfkksaakjahfk</div>
        </div>

      </div>

    </div>
    <div className="pagBox">
      <Pagination align="center" size="small" showSizeChanger showQuickJumper total={50} />
    </div>

  </>

}

export default memo(CkIndex)
